<script lang="ts" setup>
import { merge } from 'lodash-es'
import dayjs from 'dayjs'
import {
  ElDatePicker,
  ElInput,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElSelect,
  ElOption
} from 'element-plus'
import { reactive, onMounted } from 'vue'
import { Search, SearchItem } from '@/components/Search'
import { formatDate } from '@/utils'
import { User } from '@/api/user/types'
import { SmsLog } from '@/api/sms-log/types'
import { getUsersListApi } from '@/api/user'
import { getSmsLogsListApi } from '@/api/sms-log'

defineOptions({
  name: 'ReportSmsLog'
})

const tableObj = reactive({
  total: 0,
  pageSize: 10,
  pageIndex: 1
})

const getDefaultBeginDate = () => dayjs().startOf('day').format('YYYY-MM-DD')
const getDefaultEndDate = () => getDefaultBeginDate()

const conditions = reactive({
  begin_date: getDefaultBeginDate(),
  end_date: getDefaultEndDate(),
  user_id: '',
  confirm_number: '',
  mobile: '',
  status: ''
})

const data = reactive<SmsLog[]>([])
const users = reactive<Array<User>>([])

const getData = async () => {
  data.length = 0
  const res = await getSmsLogsListApi(merge(conditions, tableObj, { order: '-sequence,order_by' }))
  if (res) {
    Object.assign(data, res.data.rows)
    tableObj.total = res.data.count
  }
}

const getUsers = async () => {
  const res = await getUsersListApi({ order: 'login_name', pageIndex: -1 })
  if (res) {
    users.length = 0
    Object.assign(users, res.data.rows)
  }
}

const reset = async () => {
  conditions.begin_date = getDefaultBeginDate()
  conditions.end_date = getDefaultEndDate()
  conditions.user_id = ''
  conditions.confirm_number = ''
  conditions.mobile = ''
  conditions.status = ''
  await getData()
}

const updateBeginDate = (value: string | Date | null) => {
  if (!value) {
    conditions.begin_date = getDefaultBeginDate()
  } else {
    conditions.begin_date = dayjs(value).format('YYYY-MM-DD')
  }
}

const updateEndDate = (value: string | Date | null) => {
  if (!value) {
    conditions.end_date = getDefaultEndDate()
  } else {
    conditions.end_date = dayjs(value).format('YYYY-MM-DD')
  }
}

const load = (row, _: unknown, resolve: (data) => void) => {
  resolve(row.children)
}

onMounted(() => {
  getData()
  getUsers()
})
</script>

<template>
  <Search :model="conditions" @reset="reset" @search="getData">
    <SearchItem label="开始日期" prop="begin_date">
      <ElDatePicker
        :clearable="false"
        :model-value="conditions.begin_date"
        class="!w-full"
        value-format="YYYY-MM-DD"
        @update:model-value="updateBeginDate"
      />
    </SearchItem>

    <SearchItem label="结束日期" prop="end_date">
      <ElDatePicker
        :clearable="false"
        :model-value="conditions.end_date"
        class="!w-full"
        value-format="YYYY-MM-DD"
        @update:model-value="updateEndDate"
      />
    </SearchItem>

    <SearchItem label="操作员" prop="name">
      <ElSelect v-model="conditions.user_id" class="!w-full" clearable filterable>
        <ElOption
          v-for="item of users"
          :key="item.id!"
          :label="item.login_name"
          :value="item.id!"
        />
      </ElSelect>
    </SearchItem>

    <SearchItem label="确认号" prop="confirm_number">
      <ElInput v-model="conditions.confirm_number" clearable maxlength="50" />
    </SearchItem>

    <SearchItem label="手机号" prop="mobile">
      <ElInput v-model="conditions.mobile" clearable maxlength="50" />
    </SearchItem>

    <SearchItem label="状态" prop="status">
      <ElSelect v-model="conditions.status" class="!w-full" clearable filterable>
        <ElOption label="待发送" value="INIT" />
        <ElOption label="成功" value="SUCCESS" />
        <ElOption label="失败" value="FAILED" />
      </ElSelect>
    </SearchItem>
  </Search>

  <div class="mt-10px bg-white p-20px">
    <div class="mb-10px flex flex-row justify-between">
      <div>列表</div>
      <div class="flex flex-row items-center">
        <Icon class="mr-8px ml-8px cursor-pointer" icon="ep:refresh-right" />
      </div>
    </div>

    <ElTable
      :data="data"
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      lazy
      row-key="id"
      stripe
    >
      <ElTableColumn label="确认号" prop="confirm_number" show-overflow-tooltip width="120" />

      <ElTableColumn label="手机号" prop="mobile" show-overflow-tooltip width="160" />

      <ElTableColumn label="短信内容" prop="content" show-overflow-tooltip width="auto" />

      <ElTableColumn label="结果" prop="result" show-overflow-tooltip width="140" />

      <ElTableColumn label="状态" prop="status" show-overflow-tooltip width="100" />

      <ElTableColumn label="发送时间" prop="user.login_name" show-overflow-tooltip width="160">
        <template #default="{ row }">
          {{ formatDate(row.created_at, 'YYYY-MM-DD HH:mm') }}
        </template>
      </ElTableColumn>

      <ElTableColumn label="操作员" prop="user.login_name" show-overflow-tooltip width="120" />
    </ElTable>

    <ElPagination
      v-model:current-page="tableObj.pageIndex"
      v-model:page-size="tableObj.pageSize"
      :background="true"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      :total="tableObj.total"
      class="mt-10px"
      layout="sizes, prev, pager, next, jumper, ->, total"
      @size-change="getData"
      @current-change="getData"
    />
  </div>
</template>
